import React, { useEffect, useState } from 'react';
import { Input, Button, Image, Switch, Table, Select, message } from 'antd';
import { getCategoryFn, getProListFn, searchProFn, updateProFlagFn } from '../../api/pro';
import { SearchOutlined } from '@ant-design/icons';



export default function ProList() {

        // 商品列表
        const [proList, setProList] = useState([])
        // 当前页
        const [count,setCount] = useState(1)
        // 每页数量
        const [pageNum] = useState(5)
        // 总页数
        const [total,setTotal] = useState(0)
        // 类型搜索关键字
        const [category,setCategory] = useState('')
        // 搜索关键字
        const [search,setSearch] = useState('')

    useEffect(()=>{
        getProListFn({
            count,
            limitNum:pageNum
        }).then(res=>{
            // console.log(res);
            setProList(res.data)
            setTotal(res.total)
        })
    },[count])
    

    const [categoryList,setCategoryList] = useState([])

    useEffect(()=>{ 
        getCategoryFn().then(res=>{
            const arr = []
            // console.log(res);
            res.data.forEach(item=>{
                arr.push({
                    value:item,
                    label:item
                })
            })
            setCategoryList(arr)
        })
    },[])
       


        const updateRecommendState = (checked,r) =>{
            // console.log(r);
            
            // 调用数据请求更新轮播图显示状态
            updateProFlagFn({
                proid: r.proid,
                type: "isrecommend",
                flag: checked
            }).then(res=>{
                // console.log(res);
                // 刷新当前页面
            getProListFn({count,limitNum:pageNum}).then(res => {
                    // console.log(res);
                    // message.info(res.message)
                    setProList(res.data)
                    setTotal(res.total)
                })
            })
        }

        const updateSeckillState = (checked,r) =>{
            // console.log(r);
            
            // 调用数据请求更新轮播图显示状态
            updateProFlagFn({
                proid: r.proid,
                type: "isseckill",
                flag: checked
            }).then(res=>{
                // console.log(res);
                // 刷新当前页面
            getProListFn().then(res => {
                    console.log(res);
                    setProList(res.data)
                    setTotal(res.total)
                })
            })
    
        }

        const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            render:(v,r,index)=>{
                 return <span>{(count - 1) * pageNum + index + 1}</span>
            }
        },
        {
            title: '商品名称',
            dataIndex: 'proname',
            width: 200,
            render:(v)=>{
                return <p style={
                    {
                        height:60,
                        lineHeight:'30px',
                        overflow:'hidden',
                    }
                }>{v}</p>
            }
        },
        {
            title: '商品图片',
            dataIndex: 'img1',
            render:(v)=>{
                return <Image src={v} style={{width:100}} alt="加载失败" />
            }
        },
        {
            title: '商品分类',
            dataIndex: 'category',
            key: 'category',
        },
        {
            title: '商品价格',
            dataIndex: 'originprice',
            key: 'originprice',
            sorter: (a,b)=>{
                return a.originprice - b.originprice
            }
        },
        {
            title: '商品折扣',
            dataIndex: 'discount',
            key: 'discount',
            sorter: (a,b)=>{
                return a.discount - b.discount
            }
        },
        {
            title: '是否推荐',
            dataIndex: 'isrecommend',
            render:(v,r)=>{
                return <Switch
                    checked={v}
                    onChange={(checked)=>{
                        // console.log(checked);
                       updateRecommendState(checked,r)
                    }}
                ></Switch>
            }
        },
        {
            title: '是否售卖',
            dataIndex: 'issale',
            render:(v,r)=>{
                return <Switch
                    checked={v}
                    // onChange={(checked)=>{
                    //    updateProState(checked,r)
                    // }}
                ></Switch>
            }
        },
        {
            title: '是否秒杀',
            dataIndex: 'isseckill',
            render:(v,r)=>{
                return <Switch
                    checked={v}
                    onChange={(checked)=>{
                       updateSeckillState(checked,r)
                    }}
                ></Switch>
            }
        },
    ]

    // 搜索按钮的点击事件
    const searchClick = () =>{
      searchProFn({search,category}).then(res=>{
        //   console.log(res);
          setProList(res.data)
          setTotal(res.data.length)
      })
    }


    return (
        <>
            
        <span style={{ fontSize: '18px', fontWeight:'600', marginRight:'10px'}}>商品列表</span>
            <div style={{display:'flex',marginTop:'15px'}}>
                {/* <Input placeholder="请输入商品名称" variant="filled"  style={{ width: 300 }} />
                <Button value="default">搜索</Button> */}
                <Select
                    options={categoryList}
                    width='500px'
                    placeholder="请选择商品分类" 
                    onChange={(value)=>{
                        // console.log(value)/;
                        setCategory(value)
                    }}
                ></Select>
                <Input placeholder='请输入关键字' value={search} onChange={(v)=>{setSearch(v.target.value)}}></Input>
                <Button  icon={<SearchOutlined/>} onClick={searchClick}>搜索</Button>
            </div>
             <div>
                <Table 
                    dataSource={proList} 
                    columns={columns}
                    rowKey={'proid'}  
                    // scroll={{y:500}}
                    locale={{
                        triggerAsc:'升序',
                        triggerDesc:'降序',
                        cancelSort:'取消排序'
                    }}
                    pagination={{
                            current:count,
                            pageSize:pageNum,
                            onChange:(page)=>{
                                setCount(page)
                            },
                            total:total
                    }}
                />
             </div>

        </>
    )
}
